import React, { useState, useEffect } from "react";
import {
  UserOutlined,
  ShoppingCartOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import { Card, Col, Row, Statistic } from "antd";
import { connect } from "react-redux";
import axios from "axios";

const Home = (props) => {
  const { userInfo } = props;
  const [goods, setGoods] = useState();
  const [order, setOrder] = useState();
  const [users, setUser] = useState();

  const reqStatistic = async () => {
    const responce = await axios.get(
      "http://api.shop.eduwork.cn/api/admin/index",
      {
        headers: {
          Authorization: userInfo.token,
        },
      }
    );

    const { goods_count, order_count, users_count } = responce.data;
    setGoods(goods_count);
    setOrder(order_count);
    setUser(users_count);
  };

  useEffect(() => {
    reqStatistic();
    // eslint-disable-next-line
  }, []);

  return (
    <div>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="商品总数"
              value={goods}
              //  precision={2} 小数位数
              valueStyle={{
                color: "#862e9c",
              }}
              prefix={<HomeOutlined />}
              // suffix="%"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单总数"
              value={order}
              valueStyle={{
                color: "#3f8600",
              }}
              prefix={<ShoppingCartOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户数"
              value={users}
              valueStyle={{
                color: "#680eE9",
              }}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default connect((state) => ({ userInfo: state.userInfo }))(Home);
